<script>
export default {
  data () {
    return {
      isShow: false
    }
  },
  mounted () {

    const _this = this

    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);  // 设置地图的初始比例
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // map.setHeading(64.5);   //设置地图旋转角度
    // map.setTilt(73);       //设置地图的倾斜角度

    /*
      1.标准地图：BMAP_NORMAL_MAP
      2.地球模式：BMAP_EARTH_MAP
      3.普通卫星地图：BMAP_SATELLITE_MAP
    */
    // map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);

    var locCtrl = new BMapGL.LocationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });  // 添加定位按钮控件
    map.addControl(locCtrl);


    // 设置为自定义地图样式
    // map.setMapStyleV2({
    //   styleId: 'e7fe335766e378339a5c7fc074fb0178'
    // });


    var marker = new BMapGL.Marker(point);        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中


    // 根据坐标点，绘制折线图
    var polyline = new BMapGL.Polyline([
      new BMapGL.Point(116.399, 39.895),
      new BMapGL.Point(116.405, 39.920),
      new BMapGL.Point(116.425, 39.900),
      new BMapGL.Point(116.433, 39.920),
      new BMapGL.Point(116.445, 39.900),
    ], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
    map.addOverlay(polyline);


    // 根据坐标绘制多边形
    var polygon = new BMapGL.Polygon([
      new BMapGL.Point(116.387112, 39.920977),
      new BMapGL.Point(116.385243, 39.913063),
      new BMapGL.Point(116.394226, 39.917988),
      new BMapGL.Point(116.401772, 39.921364),
      new BMapGL.Point(116.41248, 39.927893)
    ], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
    map.addOverlay(polygon);

    // 浏览器定位
    var geolocation = new BMapGL.Geolocation();
    geolocation.getCurrentPosition(function (r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        var mk = new BMapGL.Marker(r.point);
        map.addOverlay(mk);
        // 将地图位置移动到当前位置
        map.panTo(r.point);
        // alert('您的位置：' + r.point.lng + ',' + r.point.lat);


        mk.addEventListener('click', (e) => {
          // alert('click!')
          // console.log(this);
          _this.isShow = true
        });
      }
      else {
        alert('failed' + this.getStatus());
      }
    });


    // 地图检索
    var local = new BMapGL.LocalSearch(map, {
      renderOptions: { map: map }
    });
    local.search("厕所");

  }
}
</script>
<template>
  <div>
    <h3>地图显示</h3>
    <div id="container" style="height: 500px;"></div>

    <div class="content" v-show="isShow">点击当前位置时展示内容</div>

  </div>
</template>
<style scoped lang="scss">
.content {
  position: fixed;
  left: calc((100% - 300px) /2);
  top: calc((100% - 150px) /2);
  text-align: center;
  line-height: 150px;
  width: 300px;
  height: 150px;
  background-color: white;
  border-radius: 15px;

}
</style>
